ساخت اسلایدر در المنتور
هر سایتی که شما مراجعه می کنید متشکل از یکسری المان ها و توضیحات کلی در حوزه فعالیت کسب و کار خودش می باشد. در این بین یکی از ابزارهای مهمی که بیشتر مورد استفاده قرار می گیرد استفاده از اسلایدر می باشد. که باعث زیبایی طراحی سایت شده و هم این که کاربر را سریع تر به صفحه مورد نظر سریع تر منتقل می کند. در این آموزش قصد داریم با هم نحوه درج اسلایدر در المنتور را آموزش دهیم.
نحوه درج اسلایدر در المنتور
برای انجام این کار کافیست فایل آموزشی زیر را مشاهده کنید.
در فایل آموزشی بالا که مشاهده کردید نحوه درج اسلایدر با استفاده از ابزارا "Slides" در المنتور را آموزش دادیم. حالا به بخش تنظیمات این ابزار می پردازیم که چطور تصاویر به این اسلایدر اضافه کنیم.
تنظیمات المان اسلایدر در المنتور
✓ تب محتوا
اسلایدر ها (Slides): در این قسمت به صورت پیشفرض 3 تا اسلایدر تعریف شده است شما می توانید در صورت افزودن بر روی دکمه + افزودن آیتم کلیک کنید یا در صورتی خواستید اسلایدری حذف کنید، بر روی ضربدر کنار اسلایدر کلیک کنید تا اسلایدر حذف گردد. یا اگر خواستید کپی بگیرید از هر اسلایدر بر روی علامت دو برگه در کنار اسلایدر کلیک کنید.
بر روی اسلایدر کلیک کنید تا بخش تنظیمات مربوط به خود باز شود. (درج متن و عکس و دکمه).
در این بخش می توانید به اسلایدرها عکس و متن دلخواه خود را در اسلایدر وارد کنید. این قسمت شامل 3 بخش است (پشت زمینه، متن و استایل)
بخش BackGround
color: در این قسمت شما می توانید یک رنگ برای پشت زمینه اسلایدر انتخاب کنید.
image: در صورت کلیک در این بخش عکس مورد نظر از قبل اپلود شده را در این قسمت می توانید اضافه کنید.
بخش Content
عنوان و توضیحات (Title & Description): شما در این قسمت می توانید عنوان متن و یکسری توضیحات در این بخش وارد نمایید.
Button Text: در این بخش می توانید متن روی دکمه را وارد کنید مثلا (خرید کنید، مشاهده کنید، توضیحات بیشتر)
link: در این بخش می توانید لینک صفحه مورد نظر را وارد کنید.
بخش Style
اول باید حتما بخش Custom را فعال کرد تا بخش های دیگر هم فعال شوند.
Horizontal Position: در این قسمت می توانید انتخاب کنید که قرار گیری متن یه صورت افقی در چه موقعیتی قرار گیرد (چپ، راست، وسط)
Vertical Position: در این قسمت می توانید انتخاب کنید که قرار گیری متن یه صورت عمودی در چه موقعیتی قرار گیرد (بالا، پایین، وسط)
Text Align: در این بخش می توانید انتخاب کنید موقعیت عنوان و دکمه در چه جهتی قرار گیرد (چپ، وسط، راست)
Content Color: رنگ متن را به دلخواه خود تغییر دهید.
سایه متن: در این قسمت می توانید به متن های نوشته شده سایه بدهید.
✓ تب استایل
این بخش شامل 5 قسمت می باشد.
slides: در این بخش همانند بخش استایل اسلایدر در آموزش بالا توضیح دادیم می توانید نحوه قرار گیری متن و دکمه و رنگ و سایه متن را تغییر دهید.
Title: در این قسمت می توانید فاصله عنوان متن را از هم کم یا زیاد و یا رنگ متن عنوان را تغییر داد.
Description: در این قسمت می توانید فاصله توضیحات را از هم کم یا زیاد و یا رنگ متن توضیحات را تغییر داد.
Button: در این قسمت می توانید سایز دکمه، اندازه فونت، حاشیه دور و حالت پخ بودن دکمه را به صورت سفارشی تغییر دهید.
Navigation: در این بخش می توانید ناوبری های اسلایدر که شامل (پیکان و دایره ها) می باشد، سایز و رنگ آن ها را تغییر داد.
✓ تب پیشرفته
در این قسمت می توانید از حالت های حاشیه های خارجی و فاصله داخلی از (چپ، راست، بالا و پایین) استفاده کنید، و از حالت های افکت (متحرک)، پس زمینه ، حاشیه کادر دور، یا css سفارشی می توانید استفاده کنید.
اسلایدر طراحی شده با استفاده از ابزار اسلایدر در المنتور
با آموزش بالا در مورد ابزار المان توانستیم یک اسلایدر زیبا را برای سایت خود طراحی کنیم. هر چقدر در بخش تنظیمات ابزار اسلایدر وسواس بیشتری به خرج دهیم قطعا می توانیم اسلایدرهای زیباتری را طراحی کنیم. اسلایدر بالا نمونه طراحی شده با استفاده از ابزار اسلایدر المنتور.
